<template>
	<view class="content">
		<view class="Meeting">
			<view class="MeetingImg">
				<image src="../../../static/logo.png"></image>
				<text>10-15人</text>
			</view>
			<view class="order">
				<text>会议室1</text>
				<view @click="about()">预约</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data() {
			return {};
		},
		methods: {
			about() {
				uni.navigateTo({
					// ? 后面加要传的参数， 多个参数用 & 隔开
					url: './ReserveDetails/ReserveDetails'
				});
			},
		}
	}
</script>

<style lang="less">
.content {
	padding: 30upx;
	background: #f2f2f2;
	height: 89.4vh;
	.Meeting {
		width: 690upx;
		height: 468upx;
		background: #ffffff;
		box-shadow: 0px 3px 30px 0px rgba(204, 204, 204, 0.32);
		border-radius: 20px;
		.MeetingImg {
			position: relative;
			width: 690upx;
			height: 360upx;
			image {
				width: 690upx;
				height: 360upx;
				border-radius: 20upx 20upx 0px 0px;
				// z-index: -1;
				position: absolute;
				top: 0;
				left: 0;
			}
			uni-text {
				background: #000000;
				opacity: 0.5;
				color: #ffffff;
				font-size: 22upx;
				border-radius: 50upx;
				padding: 14upx 26upx;
				position: absolute;
				top: 77%;
				left: 76%;
			}
		}
		.order {
			display: flex;
			justify-content: space-between;
			padding: 20upx 30upx;
			uni-view {
				background: linear-gradient(45deg, #e56e1f, #e50012);
				box-shadow: 0px 1px 24upx 0px rgba(229, 0, 18, 0.26);
				border-radius: 60upx;
				font-size: 32upx;
				color: #ffff;
				padding: 12upx 50upx;
			}
			uni-text {
				font-size: 32upx;
				font-family: Microsoft YaHei UI;
				font-weight: 400;
				color: #333333;
				margin-top: 8upx;
			}
		}
	}
}
</style>
